import React from 'react';
import Button from "../../../../node_modules/react-bootstrap/lib/Button";
import ListGroup from "react-bootstrap/lib/ListGroup";
import ListGroupItem from "react-bootstrap/lib/ListGroupItem";
import LeftNav from '../../../../node_modules/material-ui/lib/left-nav';
import Path from '../../lib/path.js';
import Modal from "../../../../node_modules/react-bootstrap/lib/Modal";
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import List from "../component/List.jsx";
import Form from '../../src/component/formElement/Form.jsx';
import Label from '../../src/component/formElement/Label.jsx'
import Input from '../../src/component/formElement/Input.jsx'
import Selector from '../../src/component/formElement/Selector.jsx'
import SelectList from '../../src/component/formElement/SelectList.jsx'

import HttpRequest from './../HttpRequest.js';

//产品配置管理界面

var ConfigManagementTab = React.createClass({
    getInitialState: function () {
        return ({
            current_project: this.props.current_project, //当前项目
            ListData: [], //配置数据
            ListItems: [], //左侧配置列表
            current_selected: null //当前选中配置
        });
    },

    componentWillReceiveProps: function (newProps) {
        this.setState({
            current_project: newProps.current_project
        }, function () {
            this.componentWillMount();
        });
    },
    componentWillMount: function () {
        HttpRequest.getAllProductConfigs(this.state.current_project._id).success(function (configs) {
            if (configs.code == 0) {
                this.setState({
                    ListData: configs.data
                }, this._renderList)
            } else {
                toastr.error(null, "获取产品配置失败！");
            }
        }.bind(this)).error(function (err) {
            toastr.error(null, "获取产品配置失败！");
        });
    },
    itemSelected: function (config) {
        projects = [];
        HttpRequest.getProductConfigById(config._id).success(function (res) {
            if (res.code != 0) {
                toastr.error(null, res.message);
            } else {
                this.setState({
                    current_selected: res.data,
                    projects: res.data.projects
                });
            }
        }.bind(this)).error(function (err) {

        });

    },
    _renderList: function () {
        this.setState({
            List: <List ListData={this.state.ListData}
                        SelectedItemStyle={{background:"#f3f3f3"}}
                        onItemSelected={this.itemSelected}
                        itemDeleted={this.removeProductConfig}
                        ifEmpty={<span style={{color:"#969696",paddingLeft:"50px",fontSize:"14px",fontFamily:'Microsoft YaHei'}}>该项目没有产品配置！ </span>}
                        IconMap={[{type:"mk_back",icon:<img src="/res/image/MK_h.png" />},{type:"app_android",icon:<img src="/res/image/iphone_h.png"/>},{type:"app_ios",icon:<img src="/res/image/iphone_h.png" />}]}
            />
        });
        if (this.state.ListData.length > 0) {
            this.setState({
                current_selected: this.state.ListData[this.state.ListData.length - 1]
            })
        } else {
            this.setState({
                current_selected: null
            })
        }
    },
    addConfig: function (event, eventKey) {
        var mk_count = 0;
        if (mk_count == 0) {
            mk_count = "";
        }
        this.state.ListData.map(function (item) {
            if (item.name == 'new_mk_cfg' + mk_count) {
                mk_count++;
            }
        });
        var mk_name = 'new_mk_cfg' + mk_count;
        var newMkConfig = {
            "name": mk_name,
            "project": this.state.current_project._id,
            "type": "mk_back",
            "version": "1",
            "detail": {
                "dependencies": {
                    "list": [],
                    "include-packaging": "true"
                }
            },
            "workspace": null,
            "projects": []
        };

        var android_count = 0;
        if (android_count == 0) {
            android_count = "";
        }
        this.state.ListData.map(function (item) {
            if (item.name == 'new_App_Android_cfg' + android_count) {
                android_count++;
            }
        });
        var android_name = 'new_App_Android_cfg' + android_count;
        var newAppAndroidConfig = {
            "name": android_name,
            "project": this.state.current_project._id,
            "type": "app_android",
            "version": "v1.0",
            "workspace": null,
            "detail": {
                "certificate": "default"
            },
            "projects": []
        };

        var ios_count = 0;
        if (ios_count == 0) {
            ios_count = "";
        }
        this.state.ListData.map(function (item) {
            if (item.name == 'new_App_ios_cfg' + ios_count) {
                ios_count++;
            }
        });
        var ios_name = 'new_App_ios_cfg' + ios_count;
        var newAppIosConfig = {
            "name": ios_name,
            "project": this.state.current_project._id,
            "type": "app_ios",
            "version": "v1.0",
            "detail": {
                "certificate": "default"
            },
            "workspace": null,
            "projects": []
        };
        var newConfig;
        switch (eventKey) {
            case "mk_back":
                newConfig = newMkConfig;
                break;
            case "app_android":
                newConfig = newAppAndroidConfig;
                break;
            case "app_ios":
                newConfig = newAppIosConfig;
                break;
        }
        HttpRequest.addProductConfig(newConfig).success(function (resp) {
            if (resp.code == 500) {
                toastr.error(null, "添加配置失败！");
            } else {
                this.componentWillMount();

            }
        }.bind(this)).error(function (error) {
            toastr.error(null, "添加配置失败！");
        });

    },
    removeProductConfig: function (config_id) {
        confirm("确定删除？", function () {
            HttpRequest.deleteProductConfig(config_id).success(function (resp) {
                if (resp.code != 500) {
                    this.componentWillMount();
                } else {
                    toastr.error(null, "删除失败");
                }
            }.bind(this)).error(function () {
                toastr.error(null, "删除失败");
            });
        }.bind(this));
    },
    saveEdit: function (cfg_id, postData) {
        HttpRequest.updateProductConfig(cfg_id, postData).success(function (res) {
            if (res.code == 0) {
                this.componentWillMount();
                toastr.success(null, "产品配置修改成功");
            } else {
                toastr.error(null, "产品配置修改失败");
            }
        }.bind(this)).error(function (msg) {
            toastr.error(null, "产品配置修改失败");
        });
    },
    render: function () {
        var content_pageRight = null;
        if (this.state.current_selected) {
            content_pageRight = <ProductConfigDetail
                saveEdit={this.saveEdit}
                current_selected={this.state.current_selected}
                current_project={this.state.current_project}
            />
        } else {
            content_pageRight = <div style={{textAlign:"center"}}>
                <div style={{color:"#969696",marginTop:"50px",fontSize:"14px",fontFamily:'Microsoft YaHei'}}>
                    <i className="fa fa-exclamation-circle"
                       style={{fontSize:"48px",cursor:"pointer"}}/>
                    <br/>
                    该项目没有产品配置！
                </div>
            </div>
        }
        return (
            <div style={{height:"100%"}}>

                <div className="content_pageLeft">
                    <span className="info_title" style={{paddingLeft:"30px"}}>产品配置</span>
                    <DropdownButton bsStyle="primary"
                                    onSelect={this.addConfig}
                                    style={{backgroundColor:"#555",height: "25px",paddingTop: "2px"}}
                                    title="新建" id="new_product_config">
                        <MenuItem eventKey="mk_back">mk产品</MenuItem>
                        <MenuItem eventKey="app_android">Android产品</MenuItem>
                        <MenuItem eventKey="app_ios">IOS产品</MenuItem>
                    </DropdownButton>
                    <div style={{overflowY:"auto",height:"100%",maxHeight:"90%",marginTop:"5px"}}>
                        {this.state.List}
                    </div>

                </div>
                <div className="content_pageRight">
                    <span className="info_title">配置详情</span>
                    <div style={{width:"100%",height:"calc(100% - 63px)",marginTop: "20px"}}>
                        {content_pageRight}
                    </div>
                </div>

            </div>
        );
    }

});
export default ConfigManagementTab;